<template>
    <div class="schLine" v-if="!form">
        <div class="itemTitle" v-if="title">{{ title }}</div>
        <el-input :disabled="disabled" :readonly="readonly" size="mini" 
        :style="{width: (100 * Number(size)) + 'px'}" v-model="val"
        :show-password="showPassword"></el-input>
    </div>
    <el-form-item label-width="120px" v-else style="margin:10px 10px" :required="required" :label="title" :prop="field">
        <el-input :disabled="disabled" :readonly="readonly" size="mini" 
        :style="{width: (100 * Number(size)) + 'px'}" v-model="val"
        :show-password="showPassword"></el-input>
    </el-form-item>
    
</template>

<script>
export default {
    props: {
        disabled: {
            type: Boolean,
            default: false
        },
        form: {
            type: Boolean,
            default: false
        },
        field: {
            type: String,
            default: ""
        },
        required: {
            type: Boolean,
            default: false
        },
        title: {
            type: String,
            default: ""
        },
        value: {
            type: [String, Number],
            default: ""
        },
        size: {
            type: [String, Number],
            default: 3
        },
        readonly: {
            type: Boolean,
            default: false
        },
        showPassword: {
            type: Boolean,
            default: false
        }
    },
    watch: {
        value(nv, ov) {
            this.val = nv;
        },
        val(nv, ov) {
            this.$emit("input", nv);
        }
    },
    data() {
        return {
            val: this.value
        }
    },
    methods: {
        
    }
}
</script>

<style lang="scss" scoped></style>